<template>
  <div class="container">
    <el-alert :title="`数据一共 ${msgLen} 条`" type="info" show-icon>
    </el-alert>
    <el-table :data="data" style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column label="文章标题">
        <template slot-scope="{ row }">
          <span>{{ row.title }}</span>
          <i v-if="row.videoURL" class="el-icon-film color-3a3bfe" @click="handleVideoPlay(row)"></i>
        </template>
       </el-table-column>
      <el-table-column prop="visits" label="阅读数"> </el-table-column>
      <el-table-column label="录入人">
        <template slot-scope="{ row }">
          <span>{{ row.creatorID | getRoleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间">
        <template slot-scope="{ row }">
          <span>{{ new Date(row.createTime) | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="{ row }">
          <span>{{ getStatus(row.state) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="handlePreview(row)">预览</el-button>
          <el-button type="text" @click="handleDisable(row)">
            {{ getStatus(row.state ^ 1) }}
          </el-button>
          <el-button type="text" :disabled="!!row.state" @click="handleModify(row)">修改</el-button>
          <el-button type="text" :disabled="!!row.state" @click="handleRemove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="video-dist" v-if="url">
      <span class="el-icon-close close-play" @click="() => {url = ''}"></span>
      <video class="video-play"  :src="url" autoplay controls />
    </div>
    <preview-article :data="preview" :dialog-show="dialogShow" @close="() => { dialogShow = false }"></preview-article>
    <article-add
      title="修改文章"
      :dialog-visible="modiArt"
      :role-form="formData"
      @onclose="modiArt = false"
      @onconfirm="handleSubmit"
    ></article-add>
  </div>
</template>

<script>
import roleAPI from '@/api/base/baseApi'
import { status } from '@/api/hmmm/constants'
import { changeState, update, remove } from '@/api/hmmm/articles'
import previewArticle from './preview-article'
import articleAdd from '../components/articles-add'
export default {
  name: '',
  props: {
    msgLen: {
      required: true,
      default: 0
    },
    data: {
      required: true,
      default: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  data () {
    return {
      url: '',
      preview: '',
      dialogShow: false,
      modiArt: false,
      formData: undefined
    }
  },
  components: {
    previewArticle,
    articleAdd
  },
  created () {},
  mounted () {},
  filters: {
    getRoleName (id) {
      const raw = roleAPI.role.find(role => role.id === id + '')
      if (raw) {
        return raw.value
      }
    }
  },
  methods: {
    getStatus (st) {
      const state = status.find(state => state.value === st)
      return state ? state.label : ''
    },
    handleVideoPlay (row) {
      this.url = row.videoURL
    },
    handlePreview (row) {
      this.preview = row.articleBody
      this.dialogShow = true
    },
    async handleDisable (row) {
      try {
        await changeState({
          id: row.id,
          state: row.state ^ 1
        })
        this.$emit('update')
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleModify (row) {
      this.modiArt = true
      this.formData = row
    },
    async handleRemove (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.$emit('update')
      } catch (e) {
        this.$message.error(e)
      }
    },
    async handleSubmit (formData) {
      try {
        await update(formData)
        this.$emit('update')
      } catch (e) {
        this.$message.error(e)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
}
.color-3a3bfe {
  color: #3a3bfe;
}
.video-dist {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(50, 50, 50, .7);
  z-index: 9999;
  .video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 60vw;
    max-height: 60vh;
  }
  .close-play {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10vh;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    background-color: rgba(20, 20, 20, .4);
    box-shadow: 0 0 6px 1px rgba(50, 50, 50, .8);
    color: #ccc;
    font-size: 20px;
    border-radius: 50%;
    transition: box-shadow .75s, background-color 1s, color 1s;
    &:hover {
      background-color: rgba(35, 35, 35, .6);
      font-weight: 700;
      font-size: 19px;
      color: #aaa;
      box-shadow: 0 0 10px 2px rgba(50, 50, 50, .8);
    }
  }
}
</style>
